<template>
  <BasicModal :footer="null" title="修改手机" v-bind="$attrs" @register="register">
    <div></div>
    <div class="w-2/3 mx-auto mt-10 border-gray-300">
      <BasicForm @register="registerForm">
        <template #validateCode="{ model, field }">
          <FormItemRest>
            <div class="flex items-center gap-2">
              <Input style="flex: 1" v-model:value="model[field]" />
              <Button :disabled="isDisabled" @click="sendCode">{{ btnSendText }}</Button>
            </div>
          </FormItemRest>
        </template>
      </BasicForm>
      <div class="flex justify-center">
        <a-button type="primary" class="ml-2" @click="customSubmitFunc">确定</a-button>
        <a-button type="primary" class="ml-2" @click="handleCancel">取消</a-button>
      </div>
    </div>
  </BasicModal>
</template>
<script lang="ts">
  import { BasicForm, useForm } from '/@/components/Form';
  import { defineComponent, ref } from 'vue';
  import { FormSchema } from '/@/components/Form';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { changeMobile, checkMobileRepeat, sendUserValidateCode } from '/@/api/system/system';
  import { useUserStore } from '/@/store/modules/user';
  import { BasicModal, useModalInner } from '/@/components/Modal/index';
  import { Form, Button, Input } from 'ant-design-vue';
  import { useRouter } from 'vue-router';

  export default defineComponent({
    name: 'ChangeMobileModal',
    components: { BasicForm, BasicModal, FormItemRest: Form.ItemRest, Button, Input },
    setup() {
      const [register, { closeModal }] = useModalInner(async () => {});
      const isDisabled = ref(false);
      const btnSendText = ref('发送');
      const { createMessage } = useMessage();
      const { currentRoute } = useRouter();

      const schemas: FormSchema[] = [
        {
          field: 'mobile',
          component: 'Input',
          label: '新手机号',
          colProps: { span: 24 },
          required: true,
          componentProps: {
            placeholder: '请输入手机号',
          },
          rules: [
            {
              required: true,
            },
            {
              validator(_, value) {
                return new Promise((resolve, reject) => {
                  checkMobileRepeat({ mobile: value })
                    .then((data) => {
                      if (data == 0) {
                        resolve();
                      } else {
                        if (value) {
                          reject('手机号已存在');
                        } else {
                          reject();
                        }
                      }
                    })
                    .catch((err) => {
                      reject(err.msg || '验证失败');
                    });
                });
              },
              trigger: 'blur',
            },
          ],
        },
        {
          field: 'validateCode',
          component: 'Input',
          label: '验证码',
          colProps: { span: 24 },
          required: true,
          componentProps: {
            placeholder: '请输入验证码',
          },
          slot: 'validateCode',
        },
      ];
      const [registerForm, { validate, setProps, getFieldsValue }] = useForm({
        labelCol: {
          span: 8,
        },
        wrapperCol: {
          span: 15,
        },
        schemas: schemas,
        actionColOptions: {
          offset: 8,
          span: 15,
        },
        submitButtonOptions: {
          text: '确定',
        },
        showActionButtonGroup: false,
        submitFunc: customSubmitFunc,
      });

      async function customSubmitFunc() {
        try {
          const formData = await validate();
          setProps({
            submitButtonOptions: {
              loading: true,
            },
          });
          await changeMobile(formData);
          setProps({
            submitButtonOptions: {
              loading: false,
            },
          });
          createMessage.success('操作成功');
          closeModal();
        } catch (error) {
          console.log(error);
        }
      }

      function handleCancel() {
        closeModal();
      }

      let c = 60;
      async function sendCode() {
        let fields = getFieldsValue();
        console.log('fields', fields);
        if (!fields.mobile) {
          createMessage.warn('请输入手机号');
          return;
        }
        sendUserValidateCode({
          mobile: fields.mobile,
        });
        console.log('sendCode');
        btnSendText.value = '重新发送(' + c + ')';
        isDisabled.value = true;
        c = 60;

        let sint = setInterval(() => {
          c--;
          if (c == 0) {
            btnSendText.value = '发送';
            clearInterval(sint);
            isDisabled.value = false;
          } else {
            btnSendText.value = '重新发送(' + c + ')';
          }
        }, 1000);
      }

      return {
        register,
        customSubmitFunc,
        handleCancel,
        registerForm,
        sendCode,
        btnSendText,
        isDisabled,
      };
    },
  });
</script>
<style lang="less" scoped></style>
